<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>同城找师傅</title>
    <link rel="stylesheet" href="../css/basic.css">
    <style type="text/css">
        .master-list {
            width: 90%;
            margin: auto;
            height: auto;
        }

        .first-title {
            font-size: 0.25rem;
            width: 100%;
            height: 2.3rem;
            text-align: center;
        }

        .title {
            font-size: 0.3rem;
        }

        .first-title td {
            border-bottom: 1px solid #e3e3e3;
            text-align: center;
        }

        .td-one {
            width: 20%
        }

        .td-two {
            padding-left: 4%;
            width: 45%;
        }

        .td-three {
            width: 35%;
            position: relative;
            line-height: 0.7rem;
            text-align: center
        }

        .td-three button {
            bottom: 0.5rem;
            height: 0.55rem;
            margin: 0;
            width: 84%;
            background-color: #FF0042;
            border-radius: 4px;
            outline: none;
            color: white;
            font-size: 0.25rem;
            position: absolute;
            left: 0.3rem;
        }

        .td-two span {
            line-height: 0.8rem;
            font-size: 0.28rem
        }

        .collect-img {
            position: absolute;
            display: inline-block;
            width: 0.4rem;
            left: 1rem;
            bottom: 0.3rem;
        }
        .collect-xing{
            position: absolute;
            display: inline-block;
            width: 0.4rem;
            left: 1rem;
            top: 0.5rem;
        }
        .num-show {
            position: absolute;
            right: 0.1rem;
            bottom: 0.38rem;
        }

        .top-area {
            width: 90%;
            height: 1rem;
            margin: auto;
            border-bottom: 1px solid #e3e3e3;
        }

        .select-local-area {
            width: 80%;
            height: 100%;
            float: left;
        }

        .search-area {
            width: 0.4rem;
            height: 100%;
            float: right;
        }

        .select-local-area select {
            width: 33.33%;
            float: left;
            height: 100%;
            background-color: #FA8072;
        }

        .search {
            width: 100%;
            height: 100%;
            display: inline-block;
            background-image: url("../img/sousuo-tongcheng@2x.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%
        }

        .select-local-area select {
            outline: none;
            font-size: 0.28rem;
            background-color: white;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background-image: url(../../mall/img/bottomIcon.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.2rem;
        }
        .num-show-xing{
            position: absolute;
            right: 0.1rem;
            top: 0.42rem;
            font-size: 0.28rem;
        }
    </style>
    <script src="../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>同城找师傅</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="top-area">
        <div class="select-local-area">
            <select>
                <option>省</option>
            </select>
            <select>
                <option>市</option>
            </select>
            <select>
                <option>区</option>
            </select>
        </div>
        <div class="search-area">
            <a href="#" class="search">
            </a>
        </div>
    </div>

    <table class="master-list" cellspacing="0">
        <tbody>
        <tr class="first-title title">
            <td class="td-one">
                <img src="../img/touxiang@2x.png" width="100%">
            </td>
            <td class="td-two">
                <span style="float: left;">赵师傅</span>
                <span style="float: right;font-size: 0.28rem;">已缴纳保证金</span><br>
                <span style="float: left;">无投诉记录</span>
            </td>
            <td class="td-three">
                <span class="collect-img">
                    <img src="../img/shoucang-shifuxinxi@2x.png" width="100%">
                </span>
                <span class="num-show">5.0</span>

                <span class="collect-xing">
                    <img src="../img/wujiaoxing@2x.png" width="100%">
                </span>
                <span class="num-show-xing">5.0</span>

            </td>
        </tr>
        <tr class="first-title title">
            <td class="td-one">
                <img src="../img/touxiang@2x.png" width="100%">
            </td>
            <td class="td-two">
                <span style="float: left;">赵师傅</span>
                <span style="float: right;font-size: 0.28rem;">已缴纳保证金</span><br>
                <span style="float: left;">无投诉记录</span>
            </td>
            <td class="td-three">
                <span class="collect-img">
                    <img src="../img/shoucang-shifuxinxi@2x.png" width="100%">
                </span>
                <span class="num-show">5.0</span>

                <span class="collect-xing">
                    <img src="../img/wujiaoxing@2x.png" width="100%">
                </span>
                <span class="num-show-xing">5.0</span>

            </td>
        </tr>

        </tbody>
    </table>
</div>
</body>
</html>